<template>
  <div class="my-tree-container">
    <q-scroll-area class="my-scroll-area">
      <q-tree
        ref="myNavTreeRef"
        :nodes="treeList"
        node-key="sid"
        label-key="name"
        selected-color="primary"
        v-model:selected="myNavTreeSelectedItem"
        @update:selected="onNavTreeSelected"
      />
    </q-scroll-area>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, toRefs, onMounted, ref, reactive } from 'vue';
import { useCommonTree } from 'src/hook/common/useCommonTree';

export default defineComponent({
  name: 'AmyTreeItem',
  components: {},
  props: {
    treeList: {
      type: Array,
      require: true
    }
  },

  setup (props, context) {
    //数据解构
    const {
      treeList
    } = toRefs(props);

    //导航树
    const {
      convertToTreeItem
    } = useCommonTree();

    //组织架构树
    let myNavTreeSelectedItem = ref('');
    let myNavTreeRef = ref(null);

    //查询输入参数
    let queryParam = reactive({
      parentId: 0,
      sonId: 0
    });

    //导航树选择事件
    const onNavTreeSelected = () => {
      if (myNavTreeRef.value) {
        let map = convertToTreeItem(myNavTreeSelectedItem.value);
        if (map !== null) {
          queryParam.parentId = map.parentId;
          queryParam.sonId = map.sonId;
        }
      }
    };

    return {
      treeList,
      myNavTreeSelectedItem,
      myNavTreeRef,
      onNavTreeSelected
    };
  }
});
</script>

<style lang="scss" scoped>
.my-tree-container {
  padding: 0;
  margin: 0;
  .my-scroll-area {
    padding: 0;
    margin: 0;
  }
}
</style>
